<template>
	<view style="color: #DAB082;">
		<view style="margin: 165rpx 30rpx 90rpx; display: flex;align-items: center;justify-content: space-between;">
			<uni-icons type="arrowleft" color="#DAB082" size="20" @click="backTo()"></uni-icons>
			<text style="font-size: 32rpx;">开通会员</text>
			<view style="display: flex;align-items: center;">
				<uni-icons type="help" size="20" color="#DAB082"></uni-icons>
				<text style="font-size: 24rpx;margin-left: 11rpx;">会员说明</text>
			</view>
		</view>
		<view
			style="margin: 89rpx 30rpx 39rpx;padding: 36rpx 0 0 41rpx;box-sizing: border-box; width: 690rpx;height: 239rpx;border-radius: 22rpx;background-image: linear-gradient(to right,#2B282F,#6F6863);display: flex;"
		>
			<image src="/static/huiy/2.png" style="width: 68rpx;height: 58rpx;" mode="aspectFill"></image>
			<view style="display: flex;flex-direction: column;font-size: 24rpx;line-height: 40rpx;margin-left: 10rpx;">
				<text style="font-size: 32rpx;font-weight: bold;margin: 10rpx 0 5rpx;">开通会员</text>
				<text>每月享30元红包</text>
				<view style="font-size: 24rpx;">
					<text>31天可用</text>
					<text style="margin: 0 10rpx;">|</text>
					<text>不限商家</text>
				</view>
			</view>
			<button type="default" style="font-size: 30rpx;width: 180rpx;height: 70rpx;border-radius: 40rpx;background-color: #DAB082;line-height: 70rpx;margin: 40rpx 0 0 130rpx;">立即开通</button>
		</view>
		<view style="margin: 42rpx 46rpx;display: flex;">
			<view
				style="display: flex;flex-direction: column;justify-content: center;box-sizing: border-box;align-items: center; width: 210rpx;height: 220rpx;border: 1rpx solid #E7C19F;border-radius: 10rpx;"
			>
				<text>月卡会员</text>
				<text style="margin: 15rpx 0 30rpx;">¥5.00</text>
				<text>折合5.00/月</text>
			</view>
			<view
				style="display: flex;flex-direction: column;justify-content: center;box-sizing: border-box;align-items: center; width: 210rpx;height: 220rpx;border: 1rpx solid #E7C19F;border-radius: 10rpx;margin: 0 14rpx;"
			>
				<text>季卡会员</text>
				<text style="margin: 15rpx 0 30rpx;">¥30.00</text>
				<text>折合5.00/月</text>
			</view>
			<view
				style="display: flex;flex-direction: column;justify-content: center;box-sizing: border-box;align-items: center; width: 210rpx;height: 220rpx;border: 1rpx solid #E7C19F;border-radius: 10rpx;"
			>
				<text>年卡会员</text>
				<text style="margin: 15rpx 0 30rpx;">¥40.00</text>
				<text>折合5.00/月</text>
			</view>
		</view>
		<view>
			<text style="font-size: 42rpx;display: flex;justify-content: center;">会员尊享权益</text>
			<uni-grid :column="4" :showBorder="false" style="margin-top: 36rpx;">
				<uni-grid-item v-for="(item, index) in 4" :key="index">
					<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<image src="/static/huiy/11.png" style="width: 84rpx;height: 84rpx;" mode=""></image>
						<text style="font-size: 26rpx;margin: 10rpx 0 5rpx;">免运费</text>
						<text style="font-size: 20rpx;color: #686878;">每月福利</text>
					</view>
				</uni-grid-item>
			</uni-grid>
			<uni-grid :column="4" :showBorder="false" style="margin-top: 36rpx;">
				<uni-grid-item v-for="(item, index) in 4" :key="index">
					<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<image src="/static/huiy/11.png" style="width: 84rpx;height: 84rpx;" mode=""></image>
						<text style="font-size: 26rpx;margin: 10rpx 0 5rpx;">免运费</text>
						<text style="font-size: 20rpx;color: #686878;">每月福利</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view style="display: flex;align-items: center;justify-content: center;margin-top: 300rpx;">
		<!-- 	<image src="/static/huiy/Polygon 2@2x.png" style="width: 32rpx;height: 32rpx;" mode="aspectFit"></image> -->
			<uni-icons type="checkbox-filled" size="18" color="#DAB082"></uni-icons>
			<text style="font-size: 24rpx;color: #818181;">到期自动续费，可随时取消</text>
			<image src="/static/huiy/？@2x.png" style="width: 26rpx;height: 26rpx;" mode="aspectFit"></image>
		</view>
		<button type="default" style="background-color: #DAB082;width: 100%;height: 88rpx;line-height: 88rpx; border-radius: 0;position: fixed;bottom: 0;font-size: 30rpx;">开通会员</button>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods:{
	}
};
</script>

<style lang="scss">
page {
	background-color: #31281f;
}
</style>
